<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/tooltipster.bundle.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-borderless.min.css" />
<link rel="stylesheet" type="text/css" href="css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-light.min.css" />
<link rel="stylesheet" type="text/css" href="css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-noir.min.css" />
<link rel="stylesheet" type="text/css" href="css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-punk.min.css" />
<link rel="stylesheet" type="text/css" href="css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-shadow.min.css" />
		<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/tooltipster.bundle.js"></script>
<script>
	$(document).ready(function() {
		$('.tooltip').tooltipster();
		
		$('.tooltip').tooltipster({
		 theme: 'tooltipster-noir' //使用Noir主题
		});
		$('.tooltip').tooltipster({
		contentCloning: true
		});
	});
</script>
<style type="text/css">
	.tooltip_templates { display: none; }
</style>
	</head>
	<body>
		<img src="images/spiderman.png"class="tooltip" title="This is my image's tooltip message!"/>
		<span class="tooltip" title="This is my span's tooltip message!">Some text</span></br>
			
		<span class="tooltip" data-tooltip-content="#tooltip_content">This span has a tooltip with HTML when you hover over it!</span>

<div class="-tooltip_templates">
<span id="tooltip_content">
	<img src="images/browser-firefox.png" /> <strong>This is the content of my tooltip!</strong>
</span>
</div>

	</body>
</html>
